<template>
	<view class="my-container">
		<view :style="{height:stateBarHeight+'px',width:'100%','background-color':'#f96982'}"></view>
		<view class="top">
			<uni-icons type="contact-filled" size="70" color="#e6e6e6 "></uni-icons>
			<text @click="gotoLogin">{{nickName?nickName:'请登录'}}</text>
			<view class="radius"></view>
		</view>
		<u-card :show-head="false"  margin="20rpx">
			<view class="balance-container" slot="body">
				<view class="body-item">
					<text>0</text>
					<text>余额</text>
				</view>
				<view class="body-item">
					<text>0</text>
					<text>优惠券</text>
				</view>
				<view class="body-item">
					<text>0</text>
					<text>积分</text>
				</view>
			</view>
		</u-card>
		<u-card margin="20rpx">
			<view class="order-head" slot="head">
				<view>我的订单</view>
				<view>
					<text>查看全部</text>
					<u-icon name="arrow-right" color="#e6e6e6" size="30"></u-icon>
				</view>
			</view>
			<view class="order-container" slot="body">
				<view class="order-item">
					<u-icon name="red-packet" size="45" color="red"></u-icon>
					<text>待付款</text>
				</view>
				<view class="order-item">
					<u-icon name="car" size="45" color="red"></u-icon>
					<text>待发货</text>
				</view>
				<view class="order-item">
					<u-icon name="bag" size="45" color="red"></u-icon>
					<text>待付款</text>
				</view>
				<view class="order-item">
					<u-icon name="chat" size="45" color="red"></u-icon>
					<text>待评价</text>
				</view>
			</view>
		</u-card>
		<u-card :body-style="{paddingTop:'0',paddingBottom:'0'}" :show-head="false" margin="20rpx">
			<view class="menu-container" slot="body">
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="clock-fill" :size="size" color="#53bd8a"></u-icon>
						<text>浏览历史</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" :size="size" name="trash"></u-icon>
					</view>
				</view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="rmb-circle-fill" :size="size" color="#fb3f64"></u-icon>
						<text>我的钱包</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="map-fill" :size="size"  color="#5dcda2"></u-icon>
						<text>地址管理</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="star-fill" :size="size" color="#52b4f1"></u-icon>
						<text>我的收藏</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="chat-fill" :size="size" color="#ed8a3a"></u-icon>
						<text>意见反馈</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="menu-item">
					<view class="menu-item-left">
						<u-icon name="setting-fill" :size="size" color="#3dadf2"></u-icon>
						<text>设置</text>
					</view>
					<view class="menu-item right">
						<u-icon color="#e6e6e6" name="arrow-right"></u-icon>
					</view>
				</view>
				
			</view>
		</u-card>
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import bageMix from '../../mixins/tabbar-badge.js'
	import {mapState} from 'vuex'
	
	export default {
		mixins:[bageMix],
		data(){
			return {
				size:'40',
				nickName:'', //用户名称
				userPic:'', //用户头像
				email:'', //用户邮箱
				userName:'', //用户账号
			}
		},
		computed:{
			...mapState(['tabbar','stateBarHeight']),
			...mapState('m_user',['token'])
		},
		onLoad() {
			this.$store.commit('adaptive')
			this.getUserInfoFn()
		},
		methods:{
			gotoLogin(){
				uni.navigateTo({
					url:'/subpkg/login/login'
				})
			},
			async getUserInfoFn(){
				try{
					let data = await this.$axios.get('/user/getUserInfo')
					this.nickName = data.result.nickname
					this.userPic = data.result.user_pic
					this.email = data.result.email
					this.userName = data.result.username
				}catch(err){
					console.log(err)
				}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.menu-container{
		font-size: 15px;
		
		.menu-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10px;
			padding-top: 10px;
			border-bottom: 1rpx solid #e6e6e6;
		}
		.menu-item:last-child{
			border-bottom: none;
		}
		.menu-item-left{
			u-icon{
				padding-right: 10px;
			}
		}
		
	}
	
	.order-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order-container{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.order-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 50px;
		}
	}
	
	.balance-container{
		display: flex;
		padding: 0 30px;
		align-items: center;
		justify-content: space-between;
		.body-item{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	
	.top{
		height: 100px;
		position: relative;
		margin-bottom: 23px;
		display: flex;
		align-items: center;
		color: #fff;
		background-color: #f96982;
		
		
		text{
			font-size: 18px;
			margin-left: 10px;
		}
		
		.radius{
			width: 100%;
			height: 30px;
			border-radius: 100%;
			background-color: #f96982;
			position: absolute;
			bottom: -15px;
		}
	}
	
	
</style>

<style>
	page{
		background-color: #e6e6e6;
	}
</style>

